import React, {Component} from 'react';
import { Button, Avatar} from 'antd';
import PropTypes from 'prop-types';

import css from './CommentItem.less';
export default class CommentItem extends Component {
  static propTypes = {
    comment: PropTypes.object.isRequired,
    index: PropTypes.number,
    onDeleteComment: PropTypes.func
  }

  constructor(props) {
    super(props);
    this.state = {
      timeStr: ''
    }
  }

  componentWillMount() {
    this._updateCommentTimeStr()
    this.interval = setInterval(() => {
      this._updateCommentTimeStr()
    }, 5000)
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }
  _getProcessedContent(content) {
    return content
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;")
        .replace(/`([\S\s]+?)`/g, '<code>$1</code>')
  }
  _updateCommentTimeStr() {
    const {time} = this.props.comment;
    const now = new Date().getTime();
    let diffValue = now - time,
        result = '',
        minute = 1000 * 60,
        hour = minute * 60,
        day = hour * 24,
        month = day * 30,
        year = month * 12,
        _year = diffValue / year,
        _month = diffValue / month,
        _week = diffValue / (7 * day),
        _day = diffValue / day,
        _hour = diffValue / hour,
        _min = diffValue / minute,
        _secs = diffValue / 1000;
    if (_year >= 1) result = parseInt(_year) + "年前";
    else if (_month >= 1) result = parseInt(_month) + "个月前";
    else if (_week >= 1) result = parseInt(_week) + "周前";
    else if (_day >= 1) result = parseInt(_day) + "天前";
    else if (_hour >= 1) result = parseInt(_hour) + "个小时前";
    else if (_min >= 1) result = parseInt(_min) + "分钟前";
    else result = parseInt(_secs) ? parseInt(_secs) + "秒前" : '刚刚';
    this.setState({
      timeStr: result
    });
  }
  handleDelete() {
    if (this.props.onDeleteComment) {
      this.props.onDeleteComment(this.props.index)
    }
  }
  render() {
    const {user, content} = this.props.comment;
    return (
        <div className={css['comment-item']}>
          <div className={css['comment-item-meta']}>
            <div className={css['comment-item-meta-avatar']}>
              <span className="ant-avatar ant-avatar-circle ant-avatar-image">
                <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
              </span>
            </div>
            <div className={css['comment-item-meta-content']}>
              <div className={css['comment-item-meta-title']}>
                <span>{user}</span>
              </div>
              <div className={css['comment-item-meta-description']}>
                <span>{this.state.timeStr}</span>
              </div>
            </div>
          </div>
          <div className={css['comment-item-content']}>
            <p dangerouslySetInnerHTML={{
              __html: this._getProcessedContent(content)
            }}></p>
          </div>
          <div className={css['comment-item-action']}>
            <Button className={css['comment-btn']}
                    type="primary" icon="delete" onClick={this.handleDelete.bind(this)} size="small" ghost></Button>
          </div>
        </div>
    )
    }
}